import { Card, Col, Row, Statistic } from 'antd';
import numeral from 'numeral';
import { ArrowUpOutlined } from '@ant-design/icons';
import { FormattedMessage } from '@@/plugin-locale/localeExports';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};

const titlePrefix = 'dashboard-analysis.analysis';
const columns: {
  key: string;
  title: string;
  tooltip: string;
  filedRender: Function;
}[] = [
  {
    // 总车位数
    key: 'parkNum',
    title: `${ titlePrefix }.spacecnt-total`,
    tooltip: `${ titlePrefix }.spacecnt-introduce`,
    filedRender: (v: any) => numeral(v.collectValue).format('0,0'),
  },
  {
    // 今日应收金额  amount-receivable-today
    key: 'amountReceivable',
    title: `${ titlePrefix }.amount-receivable-today`,
    tooltip: `${ titlePrefix }.space-record-cnt-introduce`,
    filedRender: (v: any) => (v?.collectValue) * 0.01 === 0 && '0' || ((v?.collectValue) * 0.01).toFixed(2),
  },
  {
    // 今日实收金额   amount-received-today
    key: 'amountReceived',
    title: `${ titlePrefix }.amount-received-today`,
    tooltip: `${ titlePrefix }.space-record-cnt-introduce`,
    filedRender: (v: any) => (v?.collectValue) * 0.01 === 0 && '0' || ((v?.collectValue) * 0.01).toFixed(2),
  },
  {
    // 今日待收金额 amount-to-be-collected-today
    key: 'amountUnCollected',
    title: `${ titlePrefix }.amount-to-be-collected-today`,
    tooltip: `${ titlePrefix }.space-record-cnt-introduce`,
    filedRender: (v: any) => (v?.collectValue) * 0.01 === 0 && '0' || ((v?.collectValue) * 0.01).toFixed(2),
  },
];

interface GeneralViewProps {
  loading: boolean;
  data: Record<string, number>;
}

const GeneralView = (props: GeneralViewProps) => {


  const data = props.data;

  return (
    <Row gutter={ 24 }>
      { columns.map(item => {

        const itemData = data[item.key];

        return (
          <Col key={ item.key } { ...topColResponsiveProps }>
            <Card>
              <Statistic
                title={ <FormattedMessage id={ item.title } /> }
                value={ item.filedRender(itemData) }
                precision={ 2 }
                valueStyle={ { color: '#3f8600' } }
                prefix={ <ArrowUpOutlined /> }
                suffix='%'
              />
            </Card>
          </Col>
        );
      }) }
    </Row>
  );
};

export default GeneralView;
